<template>
    <div class="container">
      <el-form :inline="true" size="small" ref="queryForm" class="demo-form-inline">
        <el-form-item label="SQL类型：">
          <el-select size="small" v-model="mode" @change="changeMode" style="width:160px;">
            <el-option v-for="item in modes" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" icon="el-icon-thumb" @click="getData()">获取数据</el-button>
          <el-button type="primary" icon="el-icon-s-grid" @click="doSQLFormat()">格式化SQL</el-button>
        </el-form-item>
      </el-form>
      <div class="editor-box">
        <textarea ref="cmEditor" class="codeSql" v-model="code"></textarea>
      </div>
    </div>
</template>
<script>
import CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/lib/codemirror.css'// 核心样式
import 'codemirror/theme/rubyblue.css'// 主题: rubyblue
//mode
import 'codemirror/mode/sql/sql.js'

//工具包
import 'codemirror/addon/selection/active-line'//光标选中行高亮
import 'codemirror/addon/scroll/simplescrollbars.css'//滚动条-样式
import 'codemirror/addon/scroll/simplescrollbars'//滚动条
// hint
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/sql-hint.js'
//
import {format} from 'sql-formatter'
export default {
  name: 'sqlDesign',
  data() {
    return {
      mode: 'text/x-mariadb',
      modes: [
        { value: 'text/x-sql', label: 'default'}, 
        { value: 'text/x-mssql', label: 'mssql'}, 
        { value: 'text/x-mysql', label: 'mysql'}, 
        { value: 'text/x-mariadb', label: 'mariadb'}, 
        { value: 'text/x-sqlite', label: 'sqlite'}, 
        { value: 'text/x-cassandra', label: 'cassandra'}, 
        { value: 'text/x-plsql', label: 'plsql'}, 
        { value: 'text/x-hive', label: 'hive'}, 
        { value: 'text/x-pgsql', label: 'pgsql'}, 
        { value: 'text/x-gql', label: 'gql'}, 
        { value: 'text/x-gpsql', label: 'gpsql'}, 
        { value: 'text/x-sparksql', label: 'sparksql'}, 
        { value: 'text/x-esper', label: 'esper'}
      ],
      editor: null,
      code: '',
      tableData: {
        pf_user: ['id', 'name', 'phone', 'alias', 'status'],
        pf_dep: ['id', 'name', 'alias', 'create_time']
      },
      defaultOptions: {
        mode: 'text/x-sql',
        theme: 'rubyblue',
        tabSize: 2,
        line: true,
        lineNumbers: true,
        styleActiveLine: true,
        scrollbarStyle: 'overlay',
        extraKeys: {'Ctrl': 'autocomplete'},
        hintOptions: {
          completeSingle: false
        }
      },
    }
  },
  mounted() {
    this._initialize()
  },
  methods: {
    _initialize() {
      const options = {
        mode: this.mode,
        hintOptions: {
          completeSingle: false,
          // hint: this.handleShowHint,
          tables: this.tableData,
          completeOnSingleClick: false
        }
      }
      this.editor = CodeMirror.fromTextArea(this.$refs['cmEditor'], Object.assign({},this.defaultOptions, options))
      this.editor.setValue(this.value || this.code)
      this.editor.setSize('100%', window.screen.availHeight - 300 + 'px')

      this.editor.on('change', (editor) => {
        this.code = editor.getValue()
        if (this.$emit) {
          this.$emit('input', this.code)
        }
      })

      this.editor.on('inputRead', (editor) => {
        const cur = editor.getCursor()
        const curLine = editor.getLine(cur.line)
        const lastChar = curLine.charAt(curLine.length -1)
        const reg = /^[.A-Za-z0-9\u4e00-\u9fa5]+$/
        if (reg.test(lastChar)) {
          editor.showHint()
        }
      })
    },
    changeMode(val) {
      console.log('change mode to : ', val)
      this.editor.setOption('mode', val)
    },
    getData() {
      //console.log(this.code)
      console.log('getData: ')
      console.log(this.editor.getValue())
    },
    doSQLFormat() {
      const val = this.editor.getValue()
      this.editor.setValue(format(val))
    }
  }
}
</script>
<style>
.editor-box {
  overflow: auto;
  border-radius: 8px;
  /* background: #112435; */
}
.codeSql {
  font-size: 12pt;
  height: 100%;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono,DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}

</style>
